<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定义定位点图标</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style type="text/css">
       html,body,#container{
           height:100%;
       }
       .info{
            width:26rem;
            margin-right: 0;
            margin-left: 0;
            border-top-color: grey;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border-radius: .25rem;
            position: fixed;
            top: 1rem;
            background-color: white;
            width: auto;
            min-width: 22rem;
            border-width: 0;
            right: 1rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="info">
    <h4 id='status'></h4><hr>
    <p id='result'></p><hr>
    <label>定位结果：</label><label id="lng_lat"></label><br>
    <button onclick="copyText()">复制经纬度</button>
    <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f0ff272f29b9084cf90d5b0718a8154b"></script>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    var options = {
        'showButton': true,//是否显示定位按钮
		'buttonPosition': 'LB',//定位按钮的位置
		/* LT LB RT RB */
		'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
		'showMarker': true,//是否显示定位点
		'markerOptions':{//自定义定位点样式，同Marker的Options
		  'offset': new AMap.Pixel(-18, -36),
		  'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
		},
		'showCircle': true,//是否显示定位精度圈
		'circleOptions': {//定位精度圈的样式
			'strokeColor': '#0093FF',
			'noSelect': true,
			'strokeOpacity': 0.5,
			'strokeWeight': 1,
			'fillColor': '#02B0FF',
			'fillOpacity': 0.25
		}
    }
    AMap.plugin(["AMap.Geolocation"], function() {
        var geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }});
        
        

    });

    //解析定位结果
    function onComplete(data) {
        document.getElementById('status').innerHTML='定位成功'
        var str = [];
        var lng_lat = data.position;
        // str.push('定位结果：' + data.position);
        str.push('定位类别：' + data.location_type);
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('result').innerHTML = str.join('<br>');
        document.getElementById('lng_lat').innerHTML = lng_lat;
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
    }
</script>
<script>
    function copyText() {
      var text = document.querySelector("#lng_lat").textContent;
      //var text = "要复制的文本";
      navigator.clipboard.writeText(text).then(function() {
        var retext = "经纬度："+text+"已复制到剪贴板";
        alert(retext);
      }, function(err) {
        alert("无法复制文本: ", err);
      });
    }
  </script>
</body>
</html>